import React, { useCallback } from 'react'
import { Image, Tooltip } from 'antd'
import ReasonBox from './ReasonBox'
import TopTitleBox from './TopTitleBox'
import DescTitle from './DescTitle'
import SortContent from './SortContent'
import { reasoningMap } from '@/views/utils/statusMap'

import styles from './Case.module.scss'

const imgStyle = {
  height: '170px',
  maxWidth: '100%',
  borderRadius: 6,
  border: '1px solid rgba(29, 29, 53, 0.15)',
  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
}

const CaseReasoning = ({ data, reinforceType }) => {
  const { 0: origin, 1: adv, 2: def } = reasoningMap
  return (
    <div className={styles.imageBox}>
      <ReasonBox title={origin[2]}>
        <div className={styles.reasonWrap}>
          <TopTitleBox>{origin[3]}</TopTitleBox>
          <div className={styles.imageContentWrap}>
            <Image style={imgStyle} src={data[origin[0]]} />
            <DescTitle>{data[origin[4]]}</DescTitle>
          </div>
        </div>
        <SortContent sortList={data[origin[1]]}></SortContent>
      </ReasonBox>
      <ReasonBox title={adv[2]}>
        <div className={styles.reasonWrap}>
          <TopTitleBox>{adv[3]}</TopTitleBox>
          <div className={styles.imageContentWrap}>
            <Image style={imgStyle} src={data[adv[0]]} />
            <DescTitle>{data[adv[4]]}</DescTitle>
          </div>
        </div>
        <SortContent sortList={data[adv[1]]}></SortContent>
      </ReasonBox>
      <ReasonBox title={def[2]}>
        <div className={styles.reasonWrap}>
          <TopTitleBox>{reinforceType ? def[4] : def[3]}</TopTitleBox>
          <div className={styles.imageContentWrap}>
            <Image style={imgStyle} src={data[def[0]]} />
            <DescTitle>{data[def[5]]}</DescTitle>
          </div>
        </div>
        <SortContent sortList={data[def[1]]}></SortContent>
      </ReasonBox>
    </div>
  )
}
export default CaseReasoning
